<template>
    <div class="market-index-wrap">
        <goods :goodsItem="item" v-for="item in goodsList" :key="item.id" class="market-item"></goods>
        <div class="achor">
            <a-anchor :offsetTop="200">
                <a-anchor-link v-for="item in goodsList" :key="item.id" :href="'#'+item.id" :title="item.achor" />
            </a-anchor>
        </div>
        <div class="my-shopping-and-carts">
            <div class="shopping small-hand flex-col-center" @click="isShowShopping=!isShowShopping">
                <div class="icon">
                    <a-icon type="taobao-circle" />
                </div>
                全部订单
            </div>
            <div class="cart small-hand flex-col-center" @click="isShowCart=!isShowCart">
                <div class="icon">
                    <a-icon type="shopping-cart" />
                </div>
                购物车
            </div>
        </div>
        <shopping @shoppingNotShow="isShowShopping=false" :visible="isShowShopping"></shopping>
        <cart @cartNotShow="isShowCart=false" :visible="isShowCart"></cart>
    </div>
  </template>
  
  <script>
  import goods from "./goods.vue"
  import shopping from './shopping.vue'
  import cart from './cart.vue';
  export default {
    name: 'macketIndex',
    components: {
        goods,
        shopping,
        cart
    },
    data(){
        return{
            //这里只先传id，后面的再写
        goodsList:[
            {
            id:'1',
            achor:'日用百货'
            },
            {
            id:'2',
            achor:'学习用品'
            },
            {
            id:'3',
            achor:'体育用品'
            },
            {
            id:'4',
            achor:'厨房用品'
            },
        ],
        isShowShopping:false,
        isShowCart:false
        }
    }
  }
  </script>
  
  <style scoped lang="less">
  .market-item{
    margin-bottom:60px;
    border-radius: 16px;
    padding: 16px 0;
    background-color: rgb(230, 252, 252);
  }
  .market-item:last-of-type{
    margin-bottom: 0;
  }
  .achor{
    position: fixed;
    left: 30px;
    top: 60%;
    padding: 16px;
    border-radius: 10px;
    background: white;
  }
  .my-shopping-and-carts{
    position: fixed;
    right: 30px;
    top: 50%;
    padding: 16px;
    border-radius: 10px;
    background: rgb(243, 162, 162);
    .shopping{
        .icon{
            color: orange;
            font-size: 40px;
        }
    }
    .cart{
        .icon{
            color: rgb(249, 213, 145);
            font-size: 40px;
        }
    }
  }
  </style>
  